<template>
    <el-dropdown
        plain
        type="single-number"
        placement="bottom"
        trigger="click"
        @command="dropDown"
        style="margin-left: 10px"
    >
        <el-button class="search-btn" size="mini">
            {{dropdownData.mainTitle}}
            <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
                v-for="(v,i) in dropdownData.btnText"
                :key="i"
                :command="v.command"
            >{{v.command}}</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</template>

<script>
export default {
    name: "dropdown",
    props: {
        dropdownData: {
            type: Object,
            default: () => []
        }
    },
    methods: {
        dropDown(data) {
            this.$emit("dropDown", data);
        }
    }
}
</script>

<style scoped lang="scss">
/deep/ .el-dropdown {
    margin-right: 10px;
    
    button {
        background: #f7f9ff;
        border: 1px solid #0089ef;
        color: #0089ef;
    }
}
</style>